<template>

  <div class="app-container">
    <el-card style="margin: 0 auto; width: 60vw; ">

      <div>
        <el-form ref="authorForm" label-position="right" :model="authorForm" :rules="rules" label-width="120px" class="demo-authorForm">
          <el-row type="flex">
            <el-col :span="16">
              <el-row type="flex">
                <el-col :span="12">
                  <el-form-item label="著作权人：" prop="Copyrighter">
                    <el-input v-model="authorForm.Copyrighter" />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="类别：" prop="ResponsibilityType">
                    <el-select v-model="authorForm.ResponsibilityType" placeholder="请选择">
                      <el-option label="自然人" value="1" />
                      <el-option label="组织机构" value="2" />
                      <el-option label="未知" value="0" />
                    </el-select>
                  </el-form-item>
                </el-col>

              </el-row>

              <el-row type="flex">
                <el-col :span="12">
                  <el-form-item label="笔名：" prop="PenName">
                    <el-input v-model="authorForm.PenName" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="创作类别：" prop="CreateType">
                    <Select :disabled="disabled" :isuse="false" :value="authorForm.CreateType" valuecharacter="WorkTypeCode" :dicurl="CreateTypeURL" labelcharacter="WorkType" @optionchange="optionchange($event,'CreateType')" />
                    <!-- CreateType不在这里设置，在function里设置 -->
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row type="flex">
                <el-col :span="12">
                  <el-form-item label="性别：" prop="Sex">
                    <el-radio-group v-model="authorForm.Sex">
                      <el-radio label="1">男</el-radio>
                      <el-radio label="2">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="年龄：" prop="Age">
                    <el-input v-model="authorForm.Age" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <!-- <el-col :span="8"> -->
            <!-- <div style="border: 1px salmon solid;"> -->
            <el-form-item style="margin-bottom: 0;" label="照片：" prop="Photo">
              <el-upload
                :limit="1"
                list-type="picture-card"
                action="http://192.168.1.141/public/UploadFile.php?remoteFilePath=/bw/Copyrighter/img/"
                :on-preview="preview"
                :file-list="filelist"
                :class="{disabled:fileComputed }"
                :on-remove="handleRemove"
                :on-change="changeFile"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
              >
                <i class="el-icon-plus " />
              </el-upload>

              <el-dialog title="照片预览" :visible.sync="showDialog">
                <img :src="imgUrl" style="width:100%">
              </el-dialog>

            </el-form-item>
            <!-- </div> -->
            <!-- </el-col> -->
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="籍贯：" prop="NativePlace">
                <el-input v-model="authorForm.NativePlace" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="民族：" prop="Nation">
                <!-- <el-input v-model="authorForm.Nation" /> -->
                <Select :disabled="disabled" :isuse="false" :value="authorForm.Nation" valuecharacter="NationID" :dicurl="NationURL" labelcharacter="Nation" @optionchange="optionchange($event,'Nation')" />

              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="政治面貌：" prop="Politics">
                <el-input v-model="authorForm.Politics" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col :span="8">
              <el-form-item label="学位：" prop="Degree">
                <!-- <el-input v-model="authorForm.Degree" /> -->
                <Select :disabled="disabled" :isuse="false" :value="authorForm.Degree" valuecharacter="DegreeCode" :dicurl="DegreeURL" labelcharacter="Degree" @optionchange="optionchange($event,'Degree')" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职务：" prop="Post">
                <!-- <el-input v-model="authorForm.Post" /> -->
                <Select :disabled="disabled" :isuse="false" :value="authorForm.Post" valuecharacter="PostCode" :dicurl="PostURL" labelcharacter="Post" @optionchange="optionchange($event,'Post')" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职称：" prop="Title">
                <!-- <el-input v-model="authorForm.Title" /> -->
                <Select :disabled="disabled" :isuse="false" :value="authorForm.Title" valuecharacter="TitleID" :dicurl="TitleURL" labelcharacter="Title" @optionchange="optionchange($event,'Title')" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="国籍：" prop="Nationality">
                <el-input v-model="authorForm.Nationality" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地区：" prop="Area">
                <!-- <el-input v-model="authorForm.Area" /> -->
                <Select :disabled="disabled" :isuse="false" :value="authorForm.Area" valuecharacter="Code2C" :dicurl="AreaURL" labelcharacter="ChineseShortName" @optionchange="optionchange($event,'Area')" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作单位：" prop="WorkUnit">
                <el-input v-model="authorForm.WorkUnit" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="手机：" prop="MobilePhone">
                <el-input v-model="authorForm.MobilePhone" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮箱：" prop="Email">
                <el-input v-model="authorForm.Email" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="办公电话：" prop="OfficePhone">
                <el-input v-model="authorForm.OfficePhone" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="传真：" prop="FAX">
                <el-input v-model="authorForm.FAX" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="通讯地址：" prop="Address">
                <el-input v-model="authorForm.Address" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮编：" prop="Postcode">
                <el-input v-model="authorForm.Postcode" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="证件类别：" prop="CardType">
                <Select :disabled="disabled" :isuse="false" :value="authorForm.CardType" valuecharacter="CertCode" :dicurl="CardTypeURL" labelcharacter="Cert" @optionchange="optionchange($event,'CardType')" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件号码：" prop="CardID">
                <el-input v-model.trim="authorForm.CardID" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户行：" prop="Bank">
                <el-input v-model="authorForm.Bank" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="银行账号：" prop="BankAccount">
                <el-input v-model="authorForm.BankAccount" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否外国：" prop="FlagForeign">
                <el-select v-model="authorForm.FlagForeign" placeholder="请选择">
                  <el-option label="是" value="1" />
                  <el-option label="否" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否港澳台：" prop="FlagHMT">
                <el-select v-model="authorForm.FlagHMT" placeholder="请选择">
                  <el-option label="是" value="1" />
                  <el-option label="否" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="作者介绍：" prop="Introduction">
                <el-input v-model="authorForm.Introduction" rows="5" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="主要研究领域：" prop="ResearchAreas">
                <el-input v-model="authorForm.ResearchAreas" rows="5" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="15">
              <el-form-item label="证件照片：" prop="CardPhoto">

                <el-upload
                  :limit="1"
                  list-type="picture-card"
                  action="http://192.168.1.141/public/UploadFile.php?remoteFilePath=/bw/SelectedTopic/img/"
                  :on-preview="preview"
                  :file-list="filelistcredit"
                  :class="{disabled:filecreditComputed ,editupload:true}"
                  :on-remove="handlecreditRemove"
                  :on-change="changecreditFile"
                  :on-success="handlecreditSuccess"
                  :before-upload="beforeUpload"
                >
                  <i class="el-icon-plus " />
                </el-upload>

              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="登录账号：" prop="LoginUserName">
                <el-input v-model="authorForm.LoginUserName" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登录密码：" prop="LoginPassWord">
                <el-input v-model="authorForm.LoginPassWord" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="账号启用：" prop="FlagUse">
                <el-switch
                  v-model="FlagUseState"
                  active-color="#13ce66"
                  inactive-color="#dadada"
                  class="switchwidth"
                />

              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="录入人ID：" prop="InputUID">
                <el-input v-model="authorForm.InputUID" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="录入部门ID：" prop="InputDeptID">
                <el-input v-model="authorForm.InputDeptID" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="录入人：" prop="InputBy">
                <el-input v-model="authorForm.InputBy" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="8">
              <el-form-item label="授权查看人ID：" prop="PerUID">
                <el-input v-model="authorForm.PerUID" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="授权部门ID：" prop="PerDeptID">
                <el-input v-model="authorForm.PerDeptID" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="7">
              <el-form-item>
                <el-button size="mini" type="primary" @click="editForm()">保存</el-button>
                <el-button size="mini" @click="winclose()">关闭</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </div>

    </el-card>

  </div>

</template>

<script>
import { detail } from '@/api/author'
import { edit } from '@/api/author'
import { insituredirect, winclose } from '@/utils/redirect.js'
import Select from '@/components/Search/Select.vue'
export default {
  components: { Select },
  data() {
    return {
      filelist: [{
        url: ''
      }],
      filelistcredit: [
        {
          url: ''
        }
      ], // 证件照列表
      disabled: false, // 给子组件传过去，编辑页面的时候select是可用的
      showDialog: false,
      imgUrl: '', // 预览图片使用
      FlagUseState: false, // 启用状态
      CreateTypeURL: 'http://192.168.1.141/public/dict/Get_Dict_Work_Type.php', // 创作类别的词典链接
      CardTypeURL: 'http://192.168.1.141/public/dict/Get_Dict_Cert.php', // 证件类别的词典链接
      PostURL: 'http://192.168.1.141/public/dict/Get_Dict_Post.php', // 职务的词典链接
      TitleURL: 'http://192.168.1.141/public/dict/Get_Dict_Title.php', // 职称的字典链接
      NationURL: 'http://192.168.1.141/public/dict/Get_Dict_Nation.php', // 民族的字典链接
      DegreeURL: 'http://192.168.1.141/public/dict/Get_Dict_Degree_Code.php', // 学位的字典链接
      AreaURL: 'http://192.168.1.141/public/dict/Get_Dict_Countries_Regions.php', // 地区的字典链接
      authorForm: {
        Copyrighter: '',
        ResponsibilityType: '',
        PenName: '',
        CreateType: '',
        Sex: '1',
        Age: '',
        Photo: '', // 照片路径
        NativePlace: '',
        Nation: '',
        Politics: '',
        Degree: '',
        Post: '',
        Title: '',
        Nationality: '',
        Area: '',
        WorkUnit: '',
        MobilePhone: '',
        Email: '',
        OfficePhone: '',
        FAX: '',
        Address: '',
        Postcode: '',
        CardType: '', // 证件类别
        CardID: '',
        Bank: '',
        BankAccount: '',
        FlagForeign: '',
        FlagHMT: '',
        Introduction: '',
        ResearchAreas: '',
        CardPhoto: '', // 证件照路径
        LoginUserName: '',
        LoginPassWord: '',
        FlagUse: '',
        InputUID: '',
        InputDeptID: '',
        InputBy: '',
        PerUID: '',
        PerDeptID: ''
      },
      rules: {
        Copyrighter: [ // 必填 否则后台添加不成功
          { required: true, message: '请输入著作权人', trigger: 'blur' }
        ],
        MobilePhone: [ // 必填 否则后台添加不成功
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|7|8][0-9]{9}$/,
            message: '请输入正确的手机号', trigger: 'blur'
          }
        ],
        CardID: [
          { required: false, validator: this.checkCardID, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    fileComputed() {
      return this.filelist.length === 1
    },
    filecreditComputed() {
      return this.filelistcredit.length === 1
    }
  },
  watch: {
    FlagUseState(newval) {
      // console.log('newval', newval)
      if (newval) { // 启用
        this.authorForm.FlagUse = 1
      } else { // 停用
        this.authorForm.FlagUse = 2
      }
    }
  },
  created() {
    this.detail()
  },
  methods: {
    async detail() {
      this.ID = this.$route.query.ID
      const res = await detail(this.ID)
      this.authorForm = res.data[0]
      if (this.authorForm.Photo !== '') { // 设置图片
        this.filelist[0].url = process.env.VUE_APP_BASE_PICURL + this.authorForm.Photo
      } else {
        this.filelist = []
      }
      if (this.authorForm.CardPhoto !== '') { // 设置图片
        this.filelistcredit[0].url = process.env.VUE_APP_BASE_PICURL + this.authorForm.CardPhoto
      } else {
        this.filelistcredit = []
      }
      if (this.authorForm.FlagUse === '1') { // 设置-是否启用
        this.FlagUseState = true
      }
    },
    checkCardID(rule, value, callback) {
      // 身份证ID校验
      // console.log('val', value)
      if (this.authorForm.CardType === '01') { // 身份证的校验
        const reg = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/
        // console.log('22222正则校验', reg.test(value))
        if (value === '') return callback()
        if (!reg.test(value)) return callback(new Error('请输入正确的身份证号'))
        return callback()
      } else {
        return callback()
      }
    },
    editForm() {
      console.log('查验给后台的信息', this.authorForm)
      this.$refs.authorForm.validate(async(valid) => {
        console.log('是否合格', valid)
        if (valid) {
          const data = {
            ...this.authorForm,
            ID: this.ID // 编辑的时候ID必传
          }
          // 给后台
          const res = await edit(data)
          console.log('res.code', res.code)
          if (res.code === '200') {
            insituredirect(this, '/authorManagement')
          }
        } else {
          // 保存失败提示
          this.$message.error('保存信息失败，请重新保存提交!')
        }
      })
    },
    /* 上传功能*/
    handleSuccess(res, file) {
      // 上传成功保存的时候要保存这里信息  使之与作者对应上
      console.log('上传成功res', res)
      if (res.code === 0) {
        /* 图片上传成功，给Photo赋值*/
        this.authorForm.Photo = res.data.src
      } else {
        this.$message.error('照片上传失败，请重新上传!')
      }
      // console.log('上传照片成功file', file)
    },
    handlecreditSuccess(res, file) {
      // 上传成功保存的时候要保存这里信息  使之与作者对应上
      if (res.code === 0) {
        /* 图片上传成功，给CardPhoto赋值*/
        this.authorForm.CardPhoto = res.data.src
      } else {
        this.$message.error('证件照片上传失败，请重新上传!')
      }
    },
    beforeUpload(file) {
      // const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      const types = ['image/jpeg', 'image/png']
      if (!types.includes(file.type)) {
        this.$message.error('上传图片只能是 JPG、PNG 格式!')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传照片大小不能超过 5MB!')
        return false
      }
      return true
    },
    preview(file) {
      this.imgUrl = file.url
      this.showDialog = true
    },
    handleRemove(file) {
      this.filelist = this.filelist.filter(item => item.uid !== file.uid)
    },
    handlecreditRemove(file) {
      this.filelistcredit = this.filelistcredit.filter(item => item.uid !== file.uid)
    },
    changeFile(file, fileList) {
      this.filelist = fileList.map(item => item)
    },
    changecreditFile(file, fileList) {
      this.filelistcredit = fileList.map(item => item)
    },
    optionchange(payload, character) { // character:字段
      // 子组件的optionchange
      console.log('option改变的value', payload, character)
      this.authorForm[character] = payload
    },
    winclose() {
      winclose()
    }

  }
}
</script>

<style  scoped lang="scss">
.app-container{
  margin: 0 auto;
}

  /*upload改变证件区域大小*/
  .editupload{
    ::v-deep .el-upload--picture-card{
                    width: 100%;
                    height: 200px;
                }
               ::v-deep .el-upload{
                    width: 100%;
                    height: 200px;
                    line-height: 200px;
                }
               ::v-deep .el-upload-list--picture-card .el-upload-list__item{
                    width: 100%;
                    height: 200px;
                    line-height: 20px;
                }
               ::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail{
                    width: 100%;
                    height: 200px;
                    line-height: 200px;
                }
               ::v-deep .avatar{
                    width: 100%;
                    height: 200px;
                }
  }
 /*end*/
/*调整输入框的大小 最后统一放置*/
::v-deep .el-input__inner {
    height: 30px;
  }
  ::v-deep .el-range-editor.el-input__inner{
    padding:0 9px;
    margin-top:5px;
  }
  ::v-deep .el-date-editor .el-range__icon{
    line-height:28px;
  }

  /*调整icon的悬浮颜色 后面统一放置*/
.icon{
  margin-right: 4px;
}
 .icon:hover{
  color:#66b1ff;
}
.pagination{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
/*form的宽度 设置成自适应宽度*/
.el-form-item {
  margin-right: 0 !important;
}
.el-form-item__label {
  position: absolute;
}
.el-form-item__content {
  width: 100%;
  padding-left: 80px;
}
.el-select,
.el-input_inner {
  width: 100%;
}
/*end*/
/*照片只显示一个上传按钮*/
::v-deep .disabled .el-upload--picture-card{
  display: none !important
}
/*上传的过程不要动画*/
::v-deep .el-upload-list__item {
      transition: none !important;
    }
    /*开关按钮变长一点*/
    .switchwidth ::v-deep .el-switch__core{
        width: 50px !important;
    }
</style>
